<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
interface Tab {
  name: string;
  path: string;
  icon: string;
}
interface Props {
  tabs?: Tab[];
}
const props = withDefaults(defineProps<Props>(), {
  tabs: () => [
    {
      name: "首页",
      path: "home",
      icon: "icon-home"
    },
    {
      name: "分类",
      path: "cate",
      icon: "icon-cate"
    },
    {
      name: "购物车",
      path: "cart",
      icon: "icon-cart"
    },
    {
      name: "我的",
      path: "my",
      icon: "icon-my"
    }
  ]
});
const $router = useRouter();
const changeTab = item => {
  $router.push(item.path);
};
</script>

<template>
  <div
    class="tab-bar"
    w:w="screen"
    w:flex="~ nowrap"
    w:align="items-center"
    w:justify="around"
    w:bg="light-50"
    w:p="4"
    w:border="t-1 gray-400 solid"
  >
    <div
      v-for="(item, idx) in props.tabs"
      :key="idx"
      :class="{ active: item.path == $route.name }"
      w:flex="~ col nowrap"
      w:align="items-center"
      w:text="gray-400"
      @click="changeTab(item)"
    >
      <div class="icon iconfont" :class="[item.icon]" w:text="5xl" />
      <div class="title" w:text="lg" w:m="t-4">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-bar {
  .active {
    color: #60a5fa;
  }
}
</style>
